import { message, Form } from 'antd';
import { LoginForm, ProFormText } from '@ant-design/pro-form';
import React from 'react';
import { history, SelectLang } from 'umi';
import Footer from '@/components/Footer';
import { login } from '@/services/ant-design-pro/auth';
import { setToken } from '@/utils/utils';
import styles from './index.less';
import { LockOutlined, PhoneOutlined } from '@ant-design/icons';

const replaceGoto = (pathName: string) => {
  if (!history) return;
  location.pathname = pathName;
};

const Login: React.FC = () => {
  const [form] = Form.useForm();
  const loginHandle = async () => {
    form.validateFields().then(async (values) => {
      const res = await login({ ...values });
      if (res.status) {
        setToken(res.data.token);
        replaceGoto('/UserManage');
        message.success(res.msg);
      } else {
        message.error(res.msg);
      }
    });
  };
  return (
    <div className={styles.container}>
      <div className={styles.lang} data-lang>
        {SelectLang && <SelectLang />}
      </div>
      <div className={styles.content}>
        <LoginForm
          form={form}
          logo="https://github.githubassets.com/images/modules/logos_page/Octocat.png"
          title="用户管理平台"
          subTitle=" "
          onFinish={loginHandle}
        >
          <ProFormText
            name="phone"
            fieldProps={{
              size: 'large',
              prefix: <PhoneOutlined className={'prefixIcon'} />,
            }}
            placeholder={'请输入手机号'}
            rules={[
              {
                required: true,
                message: '请输入手机号!',
              },
            ]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined className={'prefixIcon'} />,
            }}
            placeholder={'请输入密码！'}
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
            ]}
          />
        </LoginForm>
      </div>
      <Footer />
    </div>
  );
};

export default Login;
